<template>
    <app-layout>
        <view class="f-switch" :style="{'background-color': getTheme.background}">
           <template v-if="!is_no_now">
               <image v-if="is_switch" src="./../image/processing.png"></image>
               <image v-else src="./../image/start.png"></image>
               <button class="button left" @click="is_switch = true"></button>
               <button class="button right" @click="is_switch = false"></button>
           </template>
            <view v-else style="font-size: 36rpx;text-align: center;color: #fff;line-height:100rpx">
                即将开始
            </view>
        </view>
        <view class="f-bulletin" :style="{'background-color': getTheme.background}" v-if="Object.keys(activity).length">
            <view>
                <view class="dir-left-nowrap main-between cross-center">
                    <view class="f-title">
                        {{activity.title}}
                    </view>
                    <view class="f-rule" @click="goRule">
                        活动规则
                        <image src="/static/image/icon/arrow-right.png"></image>
                    </view>
                </view>
                <view class="f-timing">
                    距离本场{{type === 1 ? '结束' : '开始'}}
                    <text :style="{'color': getTheme.color}">{{time_str.day}}</text>天
                    <text :style="{'color': getTheme.color}">{{time_str.hou}}</text>时
                    <text :style="{'color': getTheme.color}">{{time_str.min}}</text>分
                    <text :style="{'color': getTheme.color}">{{time_str.sec}}</text>秒
                </view>
            </view>
        </view>
        <scroll-view scroll-y @scrolltolower="getMore" class="f-activity" :style="{'background-color': getTheme.background}"v-if="list.length > 0">
            <view class="f-item dir-left-nowrap"
                  @click="routeDetail(item.id)"
                  v-for="(item, index) in list" :key="index">
                <view class="f-image">
                    <view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
                        <image :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
                    </view>
                    <image class='f-pic' :src="item.goodsWarehouse.cover_pic"></image>
                </view>
                <view class="cont box-grow-1 dir-top-nowrap main-between">
                    <view>
                        <view class="f-name t-omit-two" style="overflow: hidden">
                            <text v-if="item.discount_type === 1" :style="{'background-color': getTheme.background}" class="f-discount">{{Number(item.min_discount)}}折</text>
                            <text v-else :style="{'background-color': getTheme.background}" class="f-discount">减{{item.min_discount}}元</text>
                            <text>{{item.goodsWarehouse.name}}</text>
                        </view>
                        <view class="app-progress main-between cross-center">
                            <view class="app-percentage" :style="{'border-color': getTheme.border}">
                                <view class="percentage" :style="{width: `${item.percentage}`,'background': getTheme.background}"></view>
                                <view class="app-already" :style="{'color': getTheme.color}">已抢购{{item.sales}}{{item.unit}}</view>
                            </view>
                            <view class="app-past" :style="{'color': getTheme.color}">仅剩{{item.goods_num > 10000 ? item.numList.priceInt + item.numList.priceFloat : item.goods_num}}{{item.unit}}</view>
                        </view>
                    </view>
                    <view class="price-button dir-left-nowrap main-between cross-bottom">
                        <view class="price app-price dir-top-nowrap main-right cross-top">
                            <app-sup-vip :is_vip_card_user="item.vip_card_appoint.is_vip_card_user" margin="4rpx 0 0" v-if="item.vip_card_appoint.discount" :discount="item.vip_card_appoint.discount"></app-sup-vip>
                            <view :class="item.is_level ? 'dir-top-nowrap' : 'dir-left-nowrap cross-bottom'" style="width: 100%;">
                                <view class="app-min-price" :style="{'color': getTheme.color}">
                                    <text class="price-float">￥</text>
                                    <text class="price-int">{{item.priceList.priceInt}}</text>
                                    <text class="price-float">{{item.priceList.priceFloat}}</text>
                                </view>
                                <view v-if="item.is_level" class="app-member-price" :style="{'background':getTheme.background_p,'color':getTheme.color}">
                                    <view class="t-omit">会员价
                                        <text class="price-float">￥</text>
                                        <text class="price-int">{{item.memberList.priceInt}}</text>
                                        <text v-if="item.memberList.priceFloat != '.00'" class="price-float">{{item.memberList.priceFloat}}</text>
                                    </view>
                                </view>
                                <view v-else class="app-original-price">￥{{item.original_price}}</view>
                            </view>
                        </view>
                        <view class="app-button" style="color: #ffffff;" :style="{'background-color': item.goods_stock === 0 && type === 1 ? '#cdcdcd' : item.buy_goods_auth || type !== 1 ? getTheme.background : '#999999'}" @click.stop="grab(item)">{{type === 1 ? '马上抢' : '查看商品'}}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <u-attr
            v-if="detail"
            :goods="detail"
            v-model="attrShow"
            :theme="getTheme"
            :checked="selectAttr"
            :right-func="true"
            :left-func="true"
            @leftFunc="leftFunc"
            @rightFunc="rightFunc"
            @check="onAttr"
        >
        </u-attr>
        <view
            v-if="!Object.keys(activity).length && loading"
            :style="{height: (windowHeight - switch_height) + 'px','background-color': getTheme.background}"
            class="f-empty">
            <view class="f-empty-con">
                <view class="f-no">
                    <app-no-goods background="#efefef" :title="title"></app-no-goods>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapGetters, mapState } from "vuex";
    import appNoGoods from "../../../components/page-component/app-no-goods/app-no-goods.vue";
    import uAttr from '../../../components/page-component/goods/u-attr.vue';

    export default {
        name: "index",
        data() {
            return {
                is_switch: true,
                page: 1,
                type: 1,
                activity: {},
                timing: null,
                time_str: {
                    day: '00',
                    hou: '00',
                    min: '00',
                    sec: '00'
                },
                list: [],
                page_count: 1,
                detail: null,
                attr_groups: [],
                attrShow: 0,
                selectAttr: {},
                switch_height: 0,
                title: `暂无进行中活动`,
                is_no_now: false,
                going: true,
                loading: true,
				disable: 'disable'
            }
        },
        methods: {
            async getList() {
                this.loading = false;
                const e = await this.$request({
                    url: this.$api.flash_sale.list,
                    data: {
                        type: this.type,
                        page: this.page
                    }
                });
                if (e.code === 0) {
                    let { activity, list, next_activity, pagination } = e.data;
                    for(let item of list) {
                        item.priceList = this.handlePrice(item.price);
                        item.numList = this.handlePrice(item.goods_num, 1);
                        if(item.is_level) {
                            item.memberList = this.handlePrice(item.level_price);
                        }
                    }
                    if (this.type === 1) {
                        this.activity = activity;

                        if (Object.keys(activity).length === 0) {
                            this.is_no_now = true;
                            this.type = 2;
                            const w = await this.$request({
                                url: this.$api.flash_sale.list,
                                data: {
                                    type: this.type,
                                    page: this.page
                                }
                            });
                            let {  list, next_activity, pagination } = w.data;
                            this.activity = next_activity;
                            this.list.push(...list);
                            this.page_count = pagination.page_count;
                        } else {
                            this.is_no_now = false;
                            this.list.push(...list);
                            this.page_count = pagination.page_count;
                        }
                    } else {
                        this.activity = next_activity;
                        this.list.push(...list);
                        this.page_count = pagination.page_count;
                    }

                }
                this.loading = true;
            },
            set_time(time_at) {
                clearInterval(this.timing);
                let time_str = new Date(time_at.replace(/-/g, '/'));
                this.now_time(time_str);
                this.timing = setInterval(() => {
                    this.now_time(time_str);
                }, 1000);
            },
            now_time(time_str) {
                let time = time_str.getTime() - new Date().getTime();
                if (time < 0) {
                    clearInterval(this.timing);
                }
                let day = parseInt(time/1000/60/60/24);
                let hou = parseInt((time/1000/60/60)%24);
                let min = parseInt((time/1000/60)%60);
                let sec = parseInt((time/1000)%60);
                this.time_str.day = day < 10 ? '0' + day : day;
                this.time_str.hou = hou < 10 ? '0' + hou : hou;
                this.time_str.min = min < 10 ? '0' + min : min;
                this.time_str.sec = sec < 10 ? '0' + sec : sec;
            },
            grab(item) {
                if (this.type === 1) {
                    this.detail = null;
                    if (item.goods_stock !== 0) {
						if (!item.buy_goods_auth) {
							this.$tips.showToast({
								title: '该商品您暂无权限购买',
								icon: 'none'
							});
							return ;
						}
                        setTimeout(() => {
                            this.selectAttr = {};
                            this.detail = item;
                            this.attrShow = true;
                        })
                    }
                } else {
                    uni.navigateTo({
                        url: `/plugins/flash_sale/goods/goods?id=${item.id}`
                    })
                }
            },
            onAttr({item}) {
                this.selectAttr = item;
            },
            routeDetail(id) {
                uni.navigateTo({
                    url: `/plugins/flash_sale/goods/goods?id=${id}`
                })
            },
            goRule() {
                uni.navigateTo({
                    url: `/pages/rules/index?url=${encodeURIComponent(this.$api.flash_sale.list)}&key=content`
                });
            },
            rightFunc(data) {
                uni.navigateTo({
                    url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify([data])}`
                });
            },
            leftFunc(number) {
                this.$request({
                    url: this.$api.flash_sale.add_cart,
                    data: {
                        flash_goods_id: this.selectAttr.goods_id,
                        attr_id: this.selectAttr.id,
                        num: number
                    },
                    method: 'post'
                }).then(e => {
                    uni.showToast({
                        title: e.msg,
                        type: 'success'
                    });
                });
            },
            getMore() {
                console.log(this.page,this.page_count)
                if (this.page < this.page_count) {
                    this.page++;
                    this.getList();
                }
            }
        },
        mounted() {
            let query = wx.createSelectorQuery();
            this.$nextTick().then(() => {
                query.select('.f-switch').boundingClientRect(rect=>{
                    this.switch_height = rect.height;
                }).exec();
            });
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
                menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
        },
        watch: {
            is_switch: {
                handler(boolean) {
                    if (this.going) {
                        this.going = false;
                        this.list = [];
                        this.page = 1;
                        if (boolean) {
                            this.type = 1;
                            this.title = '暂无进行中活动';
                        } else {
                            this.type = 2;
                            this.title = '暂无下一场活动';
                        }
                        this.getList().then(() => {
                            if (this.type === 1) {
                                let end_at = this.activity.end_at;
                                end_at ? this.set_time(end_at) : null;
                            } else {
                                let start_at = this.activity.start_at;
                                start_at ? this.set_time(start_at) : null;
                            }
                            this.going = true;
                        });
                    }
                },
                immediate: true
            }
        },
        computed: {
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme'
            }),
            ...mapState('gConfig', {
                windowHeight: state => state.systemInfo.windowHeight
            }),
            ...mapState({
                appImg: state => state.mallConfig.__wxapp_img.mall,
                appSetting: state => state.mallConfig.mall.setting,
            })
        },
        components: {
            'app-no-goods': appNoGoods,
            uAttr
        },
        // #ifdef MP
        onShareAppMessage() {
            return this.$shareAppMessage({
                path: '/plugins/flash_sale/index/index',
                title: this.$children[0].navigationBarTitle
            });
        },
        // #endif
        // #ifdef MP-WEIXIN
        onShareTimeline() {
            // 分享朋友圈beta
            return this.$shareTimeline({
                title:this.$children[0].navigationBarTitle
            });
        },
        // #endif
    }
</script>

<style scoped lang="scss">
    .f-switch {
        width: 750upx;
        height: 100upx;
        position: relative;
    }
    .f-switch image {
        width: 750upx;
        height: 100upx;
        position: absolute;
        top: -1upx;
    }
    .f-switch .button {
        width: 375upx;
        height: 100upx;
        position: absolute;
        background: transparent;
        padding: 0;
        margin: 0;
        border: none;
    }
    .f-switch .right {
        right: 0;
    }
    .f-switch .left {
        left: 0;
    }
    .f-bulletin {
        padding: 20upx 24upx;
        .f-title {
            font-size: 32upx;
            font-weight: bold;
            color: #353535;

        }
        .f-rule {
            font-size: 26upx;
            color: #666;
            vertical-align: middle;
            >image {
                width: 12upx;
                height: 22upx;
                margin-left: 14upx;
            }
        }
        .f-timing {
            margin-top: 18upx;
            font-size: 26upx;
            color: #353535;
            >text:first-child {
                margin-left: 18upx;
            }
        }
    }
    .f-bulletin>view {
        background-color: #fff;
        border-radius: 15upx;
        height: 147upx;
        padding: 32upx 24upx;
    }
    .f-activity {
        padding: 0 24upx;
        overflow: auto;
        width: 750upx;
        height: calc(100vh - 287rpx);
        .f-item {
            background-color: #fff;
            margin-bottom: 18upx;
            border-radius: 16rpx;
            height: 290upx;
            width: 702rpx;
            overflow: hidden;
            .f-pic {
                width: 290upx;
                height: 290upx;
                flex-shrink: 0;
            }
            >view.cont {
                padding: 16upx 20upx;
                position: relative;
            }
            .f-name {
                font-size: 28upx;
                color: #353535;
                min-width: 304upx;
            }
            .f-discount {
                display: inline-block;
                margin-right: 20rpx;
                padding: 0 12rpx;
                line-height: 36rpx;
                height: 36rpx;
                border-radius: 8rpx;
                color: #FFFFFF;
                font-size: 24rpx;
            }
            .app-progress {
                margin-top: #{10rpx};
                font-size: 20rpx;
                height: 28rpx;
                line-height: 28rpx;
            }
            .app-percentage {
                width: #{250rpx};
                height: #{28rpx};
                border-radius: #{14rpx};
                border: 2rpx solid #ff4544;
                background-color: #ffffff;
                overflow: hidden;
                position: relative;
                .percentage {
                    height: #{24rpx};
                    min-width: #{24rpx};
                    border-radius: #{12rpx};
                    background-color: #ff4544;
                    opacity: 0.25;
                }
                .app-already {
                    position: absolute;
                    height: 28rpx;
                    line-height: 26rpx;
                    width: 250rpx;
                    text-align: center;
                    font-size: 20rpx;
                    color: #ff4544;
                    top: 0;
                    left: 0;
                }
            }
            .app-text {
                font-size: #{24rpx};
                margin-top: #{4rpx};
            }
            .app-already {
                color: #666666;
            }
            .app-past {
                color: #ff4544;
            }
            .price-button {
                min-height: #{132rpx};
                .app-price {
                    max-width: 70%;
                    .app-min-price {
                        font-family: Alibaba;
                        font-size: #{40rpx};
                        margin-top: 10rpx;
                        line-height: 1;
                        margin-right: 14rpx;
                        .price-float {
                            font-size: 28rpx;
                        }
                    }
                    .app-member-price {
                        font-size: 24rpx;
                        padding: 0 6rpx;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    .app-original-price {
                        font-size: #{24rpx};
                        color: #999999;
                        text-decoration: line-through;
                        line-height: 1;
                    }
                }
                .app-button {
                    width: #{120rpx};
                    height: #{48rpx};
                    font-size: #{24rpx};
                    text-align: center;
                    line-height: #{48rpx};
                    border-radius: #{4rpx};
                    margin-bottom: #{5rpx};
                    flex-shrink: 0;
                }
                .no-button {
                    background-color: white;
                    border: #{1rpx} solid;
                }
            }
        }
    }
    .f-empty {
        width: 750upx;
        padding: 20upx 24upx;
        .f-empty-con {
            height: 100%;
            background: #efefef;
            border-radius: 15upx;
            position: relative;
        }
        .f-no {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .out-dialog {
        border-top-left-radius: 15upx;
        border-top-right-radius: 15upx;
        width: 240upx;
        height: 240upx;
        position: absolute;
        top: 0;
        z-index: 10;
        left: 0;
        background-color: rgba(0,0,0,.5);
        image {
            width: 240upx;
            height: 240upx;
        }
    }
    .f-image {
        position: relative;
    }
</style>
